<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <include file="Public/meta" />
    <link rel="stylesheet" href="layui/css/layui.css" media="all" />
    <script type="text/javascript" src="layui/layui.js"></script>
    <style type="text/css">
        .marginleft {
            margin-left: 10px;
            float: right;
        }
        .glyphicon-ok{
            color: green;
            font-size: 16px;
        }
        .glyphicon-unchecked{
            font-size: 16px;
        }
        #list-table>tr{
            border-top: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="info-center">
        <div class="page-header">
            <div class="pull-left">
                <h4>未付款订单&nbsp;&nbsp;</h4>      
            </div>

                <form action="{:U('Admin/order/nopay')}" method="post" style="float: right;">
                    <a href="{:U('order/nopay')}">
                        <span class="pull-left margin-top glyphicon glyphicon-refresh" style="margin-top: 22px;font-size: 18px;padding:0 10px;"></span>
                    </a> 
                    <input class="form-control pull-left margin-top marginleft" type="text"  value='{$Think.post.keyword}' placeholder="请输入搜索内容" name="keyword" style="width: 200px;"> 
                    <input type="submit" class="btn btn-primary  pull-left  margin-top marginleft" value="搜索">
                </form>
                <form action="{:U('Admin/order/nopay')}" method="post" >      
                    <div class="layui-inline">
                        <input type="text" class="form-control" name="starttime" placeholder="开始时间" id="test1" value='{$Think.post.starttime}'>
                    </div>
                    <div class="layui-inline">
                        <input type="text" class="form-control" name="endtime"placeholder="结束时间" id="test2" value='{$Think.post.endtime}'>
                    </div>
                    <button type="submit" class="btn btn-primary" id="trues" >确定</button>
                </form>
<!--               <a href="{:U('user/add')}"  class="btn btn-primary pull-right margin-top">添加会员</a> -->
        </div>
        <div class="clearfix"></div>
        <div class="table-margin">
            <table class="table table-hover table-header" id="list-table">
                <thead>
                    <tr>
                        <td class="glyphicon glyphicon-ok" id="all" onclick="allchangestatus(this)"></td>
                        <td>编号</td>
                        <td>订单号</td>
                        <td>下单用户</td>
                        <td>实例规格</td>
                        <td>所在线路</td>
                        <td>产品名称</td>
                        <td>订单总价</td>
                        <td>下单时间</td>
                        <td class="w10">操作</td>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <foreach name="list" item="vo">
                        <tr>
                            <td class="glyphicon glyphicon-ok" onclick="changestatus(this)"></td>
                            <td>{$vo['id']}</td>
                            <td>
                                {$vo['orderid']}
                            </td>
                            <td>
                                {$vo.username}
                            </td>
                            <td>
                                {$vo.eidname}
                            </td>
                            <td>
                                {$vo.diyuname}
                            </td>
                            <td>
                                云服务器,云磁盘
                            </td>
                            <td>
                                {$vo.money}
                            </td>
                            <td>
                                {$vo.ordertime|date="Y-m-d H:i:s",###}
                            </td>
                            <td>
                                <a href="{:U('order/nopaydel',array('id'=>$vo['id']))}"><button type="button" class="btn btn-danger btn-xs">删除</button></a>
                                <a href="{:U('order/see',array('id'=>$vo['id']))}"><button type="button" class="btn btn-primary btn-xs">查看</button></a>
                            </td>
                        </tr>
                    </foreach>
                </tbody>
            </table>
            <div class="pageers">
                <ul>
                   {$show}
                </ul>
            </div>
        </div>
    </div> 
    <script type="text/javascript" src="__ADMIN_JS__/common.js"></script>
</body>
</html>
<script type="text/javascript">
    layui.use(['layer','laydate'], function(){
        var layer = layui.layer,laydate = layui.laydate,$ = layui.jquery;
        //时间选择
        date=new Date();
        laydate.render({
            elem: '#test1', //指定元素
            max: 'new Date()',
        });  
        laydate.render({
            elem: '#test2', //指定元素
        }); 
        $("#trues") .click(function(){
            var time1 = $("#test1").val(); 
            var time2 = $("#test2").val(); 
            var t1 = new Date(time1);
            var t2 = new Date(time2);
            if (time1 == "" || time2 == "") {
                layer.msg('请选择时间范围！', {icon: 5}); 
                return false;
            }
            if((t2 - t1) <= 0){
                layer.msg('时间范围选择错误', {icon: 5}); 
                return false;
            }
        }); 
    }); 

    // 全选复选框的选择
    function allchangestatus(id){
        var elem = $(id).parent().parent('thead').siblings('tbody').find('tr');
        if($(id).hasClass('glyphicon-ok')){            
            $(id).removeClass('glyphicon-ok').addClass('glyphicon-unchecked');
            elem.each(function(i){
               elem.eq(i).find('td').eq(0).removeClass('glyphicon-ok').addClass('glyphicon-unchecked')
            })
        }else{
            $(id).removeClass('glyphicon-unchecked').addClass('glyphicon-ok');
            elem.each(function(i){
               elem.eq(i).find('td').eq(0).removeClass('glyphicon-unchecked').addClass('glyphicon-ok')
            })
        }
    }

    // 单选选择复选框
    function changestatus(id){
        if($(id).hasClass('glyphicon-ok')){
            $(id).removeClass('glyphicon-ok').addClass('glyphicon-unchecked');
        }else{
           $(id).removeClass('glyphicon-unchecked').addClass('glyphicon-ok');
        }
       trchecked()
    }
    // 判断是否所有的单选按钮都被选中,来决定全选按钮的选中
    function trchecked(){
        $('#tbody').find('tr').each(function(i){
            var len = $('#tbody').find('tr').size();
            var len1 = $('#tbody').find('tr').find('.glyphicon-ok').length;
            if(len1 == len){
                $('#all').removeClass('glyphicon-unchecked').addClass('glyphicon-ok');
            }else{
                $('#all').removeClass('glyphicon-ok').addClass('glyphicon-unchecked');
            }
        })
    }
</script>

